<template>
    <NavBar :title="listData.length > 0 ? listData[currentIndex].day + ' ' + $t('account.days') + ' ' + $t('aiTrading.arbitrage') : ''" />
  <div class="container confirmation">
    <div class="pc-box">
        <div class="l-f">
        <div class="back l-f" @click="onBack">
            <img class="back_icon" src="@/assets/icons/icon-left.svg" alt="">
            <p class="back_title">{{$t('back')}}</p>
        </div>
    </div>
    <div class="product">
      <div class="product_head l-f l-row-sb">
        <p class="product_head_title">
          {{ $t("aiTrading.arbitrageProducts") }}
        </p>
      </div>
      <ProductList :isOpacity="true" :current="currentIndex" @change="onChange" />
    </div>
    </div>
    <div class="form" v-if="listData.length > 0">
         <p class="form_title pc-box">{{listData[currentIndex].day}} {{$t('account.days')}} {{$t('aiTrading.arbitrage')}}</p>
         <div class="form_info l-f l-row-sb">
            <div class="form_info_item">
                <p class="form_info_item_label">{{$t('aiTrading.hostingCycle')}}</p>
                <p class="form_info_item_value">{{listData[currentIndex].day}} {{$t('account.days')}}</p>
            </div>
            <div class="form_info_item">
                <p class="form_info_item_label">{{$t('account.amount')}}</p>
                <p class="form_info_item_value">${{listData[currentIndex].min_money}} - ${{listData[currentIndex].max_money}}</p>
            </div>
            <div class="form_info_item">
                <p class="form_info_item_label">{{$t('aiTrading.dailyIncome')}}</p>
                <p class="form_info_item_value l-text-gradient">${{listData[currentIndex].rate}} - ${{listData[currentIndex].rate_max}}</p>
            </div>
            <div class="form_info_item form_info_item_type">
                <p class="form_info_item_label form_info_item_type_label">{{$t('aiTrading.arbitrageCoinTypes')}}</p>
                <p class="form_info_item_value form_info_item_type_value">
                    <CoinTypes :size="24" />
                </p>
            </div>
         </div>
         <p class="form_desc">{{$t('aiTrading.hostingAmount')}}</p>
         <div class="l-f form_data">
             <div class="form_amount l-f l-f1">
                <AmountInput v-model="amount" class="form_amount_input l-f1" :placeholder="$t('aiTrading.minimum') + '$' + listData[currentIndex].min_money" />
                <p class="form_amount_unit">USD</p>
                <a-button @click="onMax" class="form_amount_max" type="primary">{{$t('aiTrading.max')}}</a-button>
            </div>
            <a-button @click="onCreate" class="form_data_btn" type="primary">{{$t('aiTrading.createOrder')}}</a-button>
         </div>
        </div>
  </div>
  <!-- 确认弹窗 -->
    <a-modal class="model" v-model:open="isOpen" :footer="null" :width="375" >
        <template v-slot:closeIcon >
            <img class="model_close" src="@/assets/icons/icon-close.svg" />
        </template>
        <div class="model_content">
            <div class="l-f l-row-c">
                <img class="model_content_icon" src="@/assets/images/order.svg" />
            </div>
            <p class="model_content_title">{{$t('aiTrading.orderStatus')}}</p>
            <p class="model_content_desc">{{$t('aiTrading.orderStatusDesc')}}</p>
            <div class="model_content_list l-f l-row-sb">
                <div class="model_content_list_item">
                    <p class="model_content_list_item_label">{{$t('aiTrading.hostingCycle')}}</p>
                    <p class="model_content_list_item_value">{{listData[currentIndex].day}} {{$t('account.days')}}</p>
                </div>
                <div class="model_content_list_item">
                    <p class="model_content_list_item_label">{{$t('account.amount')}}</p>
                    <p class="model_content_list_item_value">${{amount}}</p>
                </div>
                <div class="model_content_list_item model_content_list_no-border">
                    <p class="model_content_list_item_label">{{$t('aiTrading.dailyIncome')}}</p>
                    <p class="model_content_list_item_value">{{listData[currentIndex].rate}} - {{listData[currentIndex].rate_max}}</p>
                </div>
            </div>
        </div>
        <a-button @click="onSubmit" class="model_bottom" type="primary">{{$t('account.confirm')}}</a-button>
    </a-modal>
    <!-- 成功弹窗 -->
     <a-modal class="success-model" v-model:open="isSuccess" :footer="null" :width="375">
        <template v-slot:closeIcon >
            <img class="success-model_close" src="@/assets/icons/icon-close.svg" />
        </template>
        <div class="success-model_content">
            <div class="l-f l-row-c">
                <img class="success-model_content_icon" src="@/assets/images/success.svg" />
            </div>
            <div class="success-model_content_money l-f l-row-c">
                <p class="success-model_content_money_value l-text-gradient">{{amount}}</p>
                <p class="success-model_content_money_unit">USD</p>
            </div>
            <p class="success-model_content_desc">{{$t('aiTrading.successDesc')}}</p>
        </div>
        <a-button @click="onRecord" class="success-model_bottom" type="primary">{{$t('aiTrading.goToTheRecords')}}</a-button>
     </a-modal>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import { throttle } from '@/utils/index.js'

import { getLockListApi, postLockSubmitApi } from '@/api/tradeApi'

import NavBar from '@/components/navBar/index.vue'
import ProductList from "@/views/aiTrading/components/productList/index.vue";
import CoinTypes from '@/components/coinTypes/index.vue'
import AmountInput from '@/components/amountInput/index.vue'

const { t } = useI18n()
const router = useRouter()
const route = useRoute()

const currentIndex = ref(0)

const listData = ref([])

const amount = ref(null)
const isOpen = ref(false)
const isSuccess = ref(false)

onMounted(() => {
    let index = 0
    if(route.params && route.params.index) {
        index = Number(route.params.index)
    }
    currentIndex.value = index
    getLockList()
})

const onBack = () => {
    router.back()
}

const onChange = (index) => {
    currentIndex.value = index
}

const onMax = () => {
    amount.value = parseFloat(listData.value[currentIndex.value].max_money)
}

const onCreate = () => {
    if(!amount.value || amount.value < listData.value[currentIndex.value].min_money) {
        message.warning(t('aiTrading.pleaseEnterAValidAmount'))
        return
    }
    isOpen.value = true
}
const onSubmit = throttle(async() => {
    const res = await postLockSubmitApi({
        id: listData.value[currentIndex.value].id,
        number: amount.value
    })
    isSuccess.value = true
},3000)
const onRecord = () => {
    router.push({path: '/record', params: { index: 0}})
}

// 获取锁仓列表
const getLockList = async () => {
    const res = await getLockListApi()
    listData.value = res
}

</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>